<template>
    <div id="home">

     <header>
     <div class="headerTop">
      <van-image
        round
        width="4rem"
        height="4rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div class="name">
        <p>张三</p>
        <p>个性签名:这人很懒，什么也没有留下</p>
      </div>
     </div>
     <div class="headerBottom">
      <ul>
        <li>
        <p>999</p>
        <p>账户(￥)</p>
        </li>
        <li>
        <p>999</p>
        <p>关注</p>
        </li>
        <li>
        <p>999</p>
        <p>粉丝</p>
        </li>
        <li>
        <p>999</p>
        <p>动态</p>
        </li>
      </ul>
     </div>
     </header>

     <main>
      <div class="orderForm">
        <van-grid>
          <van-grid-item icon="coupon-o" text="我的积分" />
          <van-grid-item icon="cart-o" text="我的订单" />
          <van-grid-item icon="phone-o" text="我的预约" />
          <van-grid-item icon="like-o" text="我的收藏" />
        </van-grid>
      </div>  

      <div class="topic">

        <van-cell title="我的话题" is-link  icon='fire-o'/>
        <van-cell title="我的评论" is-link  icon='more-o'/>
        <van-cell title="我的分享" is-link  icon='share-o'/>
        <van-cell title="常见问题" is-link  icon='warn-o'/>
        <van-cell title="意见反馈" is-link  icon='phone-o'/>
        <van-cell title="设置" is-link  icon='setting-o'/>

      </div>
    </main>



      <footer>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="wap-home-o" @click="home">战役</van-tabbar-item>
            <van-tabbar-item name="circle" icon="location-o" @click="circle">圈子</van-tabbar-item>
            <van-tabbar-item name="melancholy" icon="add-o"  @click="melancholy">寻医</van-tabbar-item>
            <van-tabbar-item name="news" icon="chat-o"  @click="news">消息</van-tabbar-item>
            <van-tabbar-item name="mine" icon="smile-o" >我的</van-tabbar-item>
            </van-tabbar>
      </footer>
    </div>
</template>
  
  <script>
export default {
  data() {
    return {
      active: 'mine',
    }
  },
  methods:{
    home(){
    this.$router.push("/home")
   },
   circle(){
    this.$router.push("/circle")
   },
   melancholy(){
    this.$router.push("/melancholy")
   },
   news(){
    this.$router.push("/news")
   },
  }
    
}
  </script>

  <style scoped lang="less">
    *{
      margin: 0;
      padding: 0;
      
    }
    #app{
      #home{
        header{
          background-color: rgb(65, 172, 214);
          .headerTop{
            height: 90px;
            padding: 30px;
            display: flex;
            .name{
              margin-left: 10px;
              padding-top: 6px;
              p:nth-of-type(1){
                color: wheat;
                font-size: 20px;
                padding-bottom: 6px;
              }
              p:nth-of-type(2){
                color: wheat;
                font-size: 14px;
                margin-bottom: 6px;
              }
            }
          }
          .headerBottom{
            height: 100px;
            ul{
              display: flex;
              li{
              width: 25%;
              height: 100px;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: center;
              color: white;
              p:nth-of-type(1){
                font-size: 20px;
              }
              p:nth-of-type(2){
                font-size: 14px;
              }
            }
            }
            
          }
        }
        main{
          position: relative;
          .orderForm{
            width: 350px;
            height: 86px;
            position: absolute;
            border-radius: 6px;
            top:-34px;
            left:20px;
            background-color: white;
            box-shadow: 0 2px 10px #666666;
            z-index: 900;
          }
          .topic{
            width: 350px;
            height: 180px;
            background-color: red;
            position: absolute;
            top:69px;
            left:20px;
            .van-cell{
            line-height: 60px;
            font-size: 16px;
            color: #666666;
            .van-icon {
              line-height: 60px;
              font-size: 26px;
              margin-right: 10px;
            }
            }
          }
        }
        footer{
          .van-hairline--top-bottom{
            .van-tabbar-item{
              font-size: 16px;
            }
          }
        }
      }
    }
  </style>